<template>
  <PageLayout>
    <div class="">
      <a-typography-title :level="3">异常待办</a-typography-title>
      <div class="error-list mt-16">
        <div class="card card1">
          <div>
            <bulb-outlined class="icon" />
            <div class="d-flex flex-column a-center">
              <div>待处理</div>
              <div>{{ detail.pendingProcessNum }}</div>
            </div>
          </div>
          <div @click="jumpRouter(1)">查看详情</div>
        </div>
        <div class="card card2">
          <div>
            <bulb-outlined class="icon" />
            <div class="d-flex flex-column a-center">
              <div>已提交</div>
              <div>{{ detail.submittedNum }}</div>
            </div>
          </div>
          <div @click="jumpRouter(1)">查看详情</div>
        </div>
      </div>
      <a-typography-title :level="3">今日信息统计</a-typography-title>
      <div class="device-list mt-16">
        <div>
          <exclamation-circle-outlined class="icon" />
          <div>
            <div>服务订单</div>
            <div class="num">{{ detail.serviceOrderNum }}</div>
            <div class="btn" @click="jumpRouter(2)">查看详情</div>
          </div>
        </div>
        <div>
          <exclamation-circle-outlined class="icon" />
          <div>
            <div>信用消耗</div>
            <div class="num">{{ detail.amount }}</div>
            <div class="btn" @click="jumpRouter(2)">查看详情</div>
          </div>
        </div>
        <div>
          <exclamation-circle-outlined class="icon" />
          <div>
            <div>服务回款</div>
            <div class="num">{{ detail.receivedPayment }}</div>
            <div class="btn" @click="jumpRouter(3)">查看详情</div>
          </div>
        </div>
        <div>
          <exclamation-circle-outlined class="icon" />
          <div>
            <div>应收回款</div>
            <div class="num">{{ detail.receiveAmount }}</div>
            <div class="btn" @click="jumpRouter(3)">查看详情</div>
          </div>
        </div>
      </div>
      <div class="d-flex j-sb">
        <a-typography-title :level="3">概况</a-typography-title>
        <!-- <div class="down-btn">下载表格</div> -->
      </div>
      <div class="overview-list mt-16">
        <div>
          <div class="d-flex">
            <div class="circle"></div>
            <div class="d-flex flex-1 j-sb a-center">
              <div>{{ detail?.userStatistics?.totalNum }}</div>
              <div>总用户数</div>
              <arrow-up-outlined
                v-if="
                  detail?.userStatistics?.todayNum >
                  detail?.userStatistics?.yesterdayNum
                "
              />
              <arrow-down-outlined
                v-if="
                  detail?.userStatistics?.todayNum <
                  detail?.userStatistics?.yesterdayNum
                "
              />
            </div>
          </div>
          <div class="add-num">
            昨日新增: <span>{{ detail?.userStatistics?.yesterdayNum }}</span>
          </div>
        </div>
        <div>
          <div class="d-flex">
            <div class="circle"></div>
            <div class="flex-1 d-flex j-sb a-center">
              <div>{{ detail?.deviceStatistics?.totalNum }}</div>
              <div>设备总数</div>
              <arrow-up-outlined
                v-if="
                  detail?.deviceStatistics?.todayNum >
                  detail?.deviceStatistics?.yesterdayNum
                "
              />
              <arrow-down-outlined
                v-if="
                  detail?.deviceStatistics?.todayNum <
                  detail?.deviceStatistics?.yesterdayNum
                "
              />
            </div>
          </div>
          <div class="add-num">
            昨日新增: <span>{{ detail?.deviceStatistics?.yesterdayNum }}</span>
          </div>
        </div>
        <div>
          <div class="d-flex">
            <div class="circle"></div>
            <div class="flex-1 d-flex j-sb a-center">
              <div>{{ detail?.shopStatistics?.totalNum }}</div>
              <div>合作店铺</div>
              <arrow-up-outlined
                v-if="
                  detail?.shopStatistics?.todayNum >
                  detail?.shopStatistics?.yesterdayNum
                "
              />
              <arrow-down-outlined
                v-if="
                  detail?.shopStatistics?.todayNum <
                  detail?.shopStatistics?.yesterdayNum
                "
              />
            </div>
          </div>
          <div class="add-num">
            昨日新增: <span>{{ detail?.shopStatistics?.yesterdayNum }}</span>
          </div>
        </div>
        <div>
          <div class="d-flex">
            <div class="circle"></div>
            <div class="flex-1 d-flex j-sb a-center">
              <div>{{ detail?.shopUserStatistics?.totalNum }}</div>
              <div>签约商户</div>
              <arrow-up-outlined
                v-if="
                  detail?.shopUserStatistics?.todayNum >
                  detail?.shopUserStatistics?.yesterdayNum
                "
              />
              <arrow-down-outlined
                v-if="
                  detail?.shopUserStatistics?.todayNum <
                  detail?.shopUserStatistics?.yesterdayNum
                "
              />
            </div>
          </div>
          <div class="add-num">
            昨日新增:
            <span>{{ detail?.shopUserStatistics?.yesterdayNum }}</span>
          </div>
        </div>
        <!-- <div>
          <div class="d-flex">
            <div class="circle"></div>
            <div class="flex-1 d-flex j-sb a-center">
              <div>{{detail?. agentStatistics?.yesterdayNum}}</div>
              <div>代理商总数</div>
              <arrow-up-outlined />
            </div>
          </div>

          <div class="add-num">昨日新增: <span>{{detail?. agentStatistics?.yesterdayNum}}</span></div>
        </div> -->
      </div>
    </div>
  </PageLayout>
</template>

<script setup>
import {
  postAbnormalStatistics,
  postTodayInfoStatistics,
  postTodayOverviewStatistics,
} from "@/api/system";
import { onMounted } from "vue";
const router = useRouter()
const detail = ref({});
onMounted(() => {
  postAbnormalStatistics().then((res) => {
    detail.value = {
      ...detail.value,
      ...res.data,
    };
  });
  postTodayInfoStatistics().then((res) => {
    detail.value = {
      ...detail.value,
      ...res.data,
    };
  });
  postTodayOverviewStatistics().then((res) => {
    detail.value = {
      ...detail.value,
      ...res.data,
    };
  });
});

const jumpRouter = (type) => {
  const path = {
    1: "/error/list",
    2: "/finance/serve/list",
    3: "/finance/manage/list",
  };
  router.push({
    path: path[type],
  });
};
</script>

<style lang="less" scoped>
.btn {
  margin: 10px auto;
  // line-height: 45px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  border: 1px solid #e62129;
  border-radius: 20px;
  background: #ffefef;
  width: max-content;
  height: max-content;
  padding: 1px 8px;
  color: #e62129;
}
.error-list {
  display: flex;
  gap: 30px;
  // justify-content: center;
  margin-bottom: 32px;
  .card {
    border-radius: 8px;
    background: #fff;
    width: 350px;
    height: 200px;
    display: flex;
    flex-direction: column;

    > div {
      &:first-child {
        display: flex;
        font-size: 40px;
        flex: 1;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #ececec;
      }
      &:last-child {
        margin: 10px auto;
        // line-height: 45px;
        cursor: pointer;
        font-size: 16px;
        text-align: center;
        border: 1px solid #e62129;
        border-radius: 20px;
        background: #ffefef;
        width: max-content;
        height: max-content;
        padding: 1px 8px;
      }
      .icon {
        font-size: 100px;
        margin-right: 40px;
      }
    }
  }
  .card1 {
    color: #e62129;
  }
  .card2 {
    color: #e6797f;
  }
}

.device-list {
  display: grid;
  gap: 30px;
  grid-template-columns: 350px 350px 350px 350px;
  margin-bottom: 32px;

  > div {
    padding: 24px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    // height: 150px;
    padding: 16px;
    display: flex;
    > div {
      flex: 1;
      font-size: 28px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      font-weight: 600;
      .num {
        font-size: 40px;
      }
    }
    .btn {
      margin-bottom: 0;
    }
    .icon {
      font-size: 120px;
      margin-right: 40px;
      color: #10aeff;
    }
  }
}
.down-btn {
  font-size: 16px;
  background: #169bd5;
  color: #fff;
  padding: 2px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}

.overview-list {
  display: grid;
  gap: 30px;
  // grid-template-columns: 1fr;
  grid-template-columns: repeat(auto-fill, 350px);
  margin-bottom: 32px;
  > div {
    padding: 24px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    // height: 150px;
    padding: 16px;
    font-size: 24px;
    > div:first-child {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      margin-bottom: 16px;
      font-size: 20px;
    }
    .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #fdd355;
      margin-right: 20px;
    }
    .add-num {
      border-top: 1px dashed #ccc;
      font-size: 16px;
      padding-top: 10px;
    }
  }
}
</style>
